<template>
  <div class="flex flex-wrap gap-4">
    <el-card style="height: 80px;max-width: 750px;float:left;margin-right: 20px">
      <el-form :model="SearchActivityParams" :inline="true" class="form">
        <el-form-item label="活动id:">
          <el-select
              v-model="SearchActivityParams.activityId"
              placeholder="请选择"
              style="width: 400px"
          >
            <el-option
                v-for="item in activityOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="default" @click="search1">搜索</el-button>
          <el-button type="primary" size="default" @click="reset1">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card style="height: 80px;max-width: 750px;">
      <el-form :model="SearchUserIdParams" :inline="true" class="form">
        <el-form-item label="用户id:">
          <el-input placeholder="请您输入用户id"
                    v-model="SearchUserIdParams.userId"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="default" @click="search2">搜索</el-button>
          <el-button type="primary" size="default" @click="reset2">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
  <el-card style="margin: 10px 0;">
    <el-button type="primary" size="default" @click="addOrder">添加订单</el-button>
    <!-- table展示用户信息 -->
    <el-table style="margin: 10px 0;" border :data="orderArr">
      <el-table-column label="活动id" width="180px" align="center" prop="activityId"></el-table-column>
      <el-table-column label="商品id" width="180px" align="center" prop="goodsId"></el-table-column>
      <el-table-column label="用户id" width="130px" align="center" prop="userId" p></el-table-column>
      <el-table-column label="商品名称" width="250px" align="center" prop="goodsName"
                       show-overflow-tooltip></el-table-column>
      <el-table-column label="活动价格" width="160px" align="center" prop="activityPrice"
                       show-overflow-tooltip></el-table-column>
      <el-table-column label="数量" width="80px" align="center" prop="quantity"
                       show-overflow-tooltip></el-table-column>
      <el-table-column label="订单价格" width="160px" align="center" prop="orderPrice"
                       show-overflow-tooltip></el-table-column>
      <el-table-column label="订单状态" width="120px">
        <template #default="scope">
          <el-popover effect="light" trigger="hover" placement="top" width="auto">
            <template #reference>
              <el-tag>{{ scope.row.status === 0 ? '已发布' : (scope.row.status === 1 ? '上线' : '下线') }}</el-tag>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="280px" align="center">
        <template #="{ row, $index }">
          <el-popconfirm :title="`你确定要删除${row.goodsName}?`" width="260px" @confirm="delOrder(row.id)">
            <template #reference>
              <el-button type="primary" size="small" icon="Delete">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
  <!-- 抽屉结构:完成添加新的用户账号|更新已有的账号信息 -->
  <el-dialog v-model="drawer" title="添加订单" width=800>
    <el-form :model="OrderParams" ref="formRef">
      <el-form-item label="用户Id" prop="userId">
        <el-input placeholder="请您输入用户id" :disabled="!scence"
                  v-model="OrderParams.userId"></el-input>
      </el-form-item>
      <el-form-item label="活动id" prop="activityId">
        <el-select
            v-model="OrderParams.activityId"
            placeholder="请选择"
            style="width: 240px"
        >
          <el-option
              v-for="item in activityOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="商品id" prop="goodsId">
        <el-select
            v-model="OrderParams.goodsId"
            placeholder="请选择"
            style="width: 240px"
        >
          <el-option
              v-for="item in goodsOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="购买数量" prop="quantity">
        <el-input placeholder="请您输入购买数量"
                  v-model="OrderParams.quantity"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="drawer=false">取消</el-button>
        <el-button :disabled="!scence" type="primary" @click="save">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { nextTick, onMounted, reactive, ref } from 'vue'
import { GoodsRecords, GoodsResponseData, Goods } from '@/api/seckill/goods/type'
import { OrderRecords, OrderResponseData, Order } from '@/api/seckill/order/type'
import { Records, Status, Activity, ActivityResponseData } from '@/api/seckill/activity/type'
import {
  reqActivityInfoAll,
} from '@/api/seckill/activity'
import {
  reqGoodsInfoAll,
} from '@/api/seckill/goods'
import {
  reqOrderInfoAll,
  reqAddOrder,
  reqGetSeckillOrderByUserId,
  reqGetSeckillOrderByActivityId,
  reqDelOrder,
} from '@/api/seckill/order'

//默认页码
let activityOptions = ref<any>([])
let goodsOptions = ref<any>([])
let orderArr = ref<OrderRecords>([])
//控制分配角色抽屉显示与隐藏
let drawer = ref<boolean>(false)
//获取form组件实例
let formRef = ref<any>()
// 场景
let scence = ref<boolean>()
//收集用户信息的响应式数据
let OrderParams = reactive<Order>({
      id: '',
      userId: '',
      goodsId: '',
      goodsName: '',
      activityPrice: '',
      quantity: '',
      orderPrice: '',
      activityId: '',
      status: '',
    }),
//收集用户信息的响应式数据
    SearchActivityParams = reactive<any>({
      activityId: '',
    })
const SearchUserIdParams = reactive<any>({
  userId: '',
})
//组件挂载完毕
onMounted(() => {
  getAllOrder()
  getAllOptions()
})
//获取全部的活动
const getAllOptions = async () => {
  let result: ActivityResponseData = await reqActivityInfoAll()
  if (result.code == 1001) {
    let tmpData = result.data
    let tmpOptions: { value: any; label: any }[] = []
    tmpData.forEach((item: any) => {
      let option = {
        value: item.id,
        label: item.activityName + '-------' + item.id,
      }
      tmpOptions.push(option)
    })

    activityOptions.value = tmpOptions
  }
  let result2: ActivityResponseData = await reqGoodsInfoAll()
  if (result2.code == 1001) {
    let tmpData = result2.data
    let tmpOptions: { value: any; label: any }[] = []
    tmpData.forEach((item: any) => {
      let option = {
        value: item.id,
        label: item.goodsName + '-------' + item.id,
      }
      tmpOptions.push(option)
    })

    goodsOptions.value = tmpOptions
  }
}
//获取全部的订单
const getAllOrder = async () => {
  let result: OrderResponseData = await reqOrderInfoAll()
  if (result.code == 1001) {
    orderArr.value = result.data
  }
}
//根据状态获取活动
const getGoodsList = async (status: string) => {
  let result: OrderResponseData = await reqGoodsInfoList(status as string)
  if (result.code == 1001) {
    console.log(result.data)
    orderArr.value = result.data
  }
}
// 删除活动
const delOrder = async (id: number) => {
  let result: OrderResponseData = await reqDelOrder(id as number)
  if (result.code == 1001) {
    //再次获取全部的活动
    getAllOrder()
  }
}
//搜索
const search1 = async () => {
  let result: OrderResponseData = await reqGetSeckillOrderByActivityId(SearchActivityParams.activityId as number)
  if (result.code == 1001) {
    orderArr.value = result.data
  }
}
//搜索2
const search2 = async () => {
  let result: OrderResponseData = await reqGetSeckillOrderByUserId(SearchUserIdParams.userId as number)
  if (result.code == 1001) {
    orderArr.value = result.data
  }
}
//重置按钮的回调
const reset1 = () => {
  //清空数据
  Object.assign(SearchActivityParams, {
    activityId: '',
  })
  //再次获取全部的活动
  getAllOrder()
}
const reset2 = () => {
  //清空数据
  Object.assign(SearchUserIdParams, {
    userId: '',
  })
  //再次获取全部的活动
  getAllOrder()
}
//添加活动
const addOrder = () => {
  //抽屉显示出来
  drawer.value = true
  scence.value = true
  //清空数据
  Object.assign(OrderParams, {
    id: '',
    userId: '',
    goodsId: '',
    goodsName: '',
    activityPrice: '',
    quantity: '',
    orderPrice: '',
    activityId: '',
    status: '',
  })
  //清除上一次的错误的提示信息
  nextTick(() => {
    formRef.value.clearValidate('goodsId')
    formRef.value.clearValidate('activityId')
    formRef.value.clearValidate('userId')
    formRef.value.clearValidate('quantity')
  })
}
//自定义校验规则的回调
const validatorRoleName = (rule: any, value: any, callBack: any) => {
  if (value.trim().length >= 2) {
    callBack()
  } else {
    callBack(new Error('职位名称至少两位'))
  }
}
//职位校验规则
const rules = {
  activityName: [
    { required: true, trigger: 'blur', validator: validatorRoleName },
  ],
}

//确定按钮的回调
const save = async () => {
  //表单校验结果,结果通过在发请求、结果没有通过不应该在发生请求
  await formRef.value.validate()
  //添加活动
  let result: any = await reqAddOrder(OrderParams)
  if (result.code == 1001) {
    //提示文字
    ElMessage({ type: 'success', message: '添加成功' })
    //对话框显示
    drawer.value = false
    //再次获取全部的活动
    getAllOrder()
  } else if (result.code == 2011) {
    ElMessage({ type: 'error', message: result.data })
  }
}
//上线和下线
const updateStatus = async (id: number, status: string) => {
  //添加职位|更新职位的请求
  let result: any = await reqUpdateStatus(id, status)
  if (result.code == 1001) {
    //提示文字
    ElMessage({ type: 'success', message: '修改成功' })
    //再次获取全部的活动
    getAllOrder()
  }
}
</script>

<style scoped>

</style>
